<!--
 * @Description: 我要报修
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:13:16
-->
<template>
  <div class="demo-form-inline">
    <!-- {{ form }} -->
    <el-form ref="myForm" :model="form" :inline="true" :rules="rule">
      <div style="font-weight:bold;margin-bottom: 20px;">
        工程设备
        <div style="margin-top: 10px;">
          <el-cascader v-model="form.id" size="medium"
          :props="{
            value:'id',
            label:'name'
          }" :options="data" clearable>
          </el-cascader>
        </div>
      </div>
      <div style="font-weight:bold;margin-bottom: 20px;">
        报修原因
        <div style="margin-top: 10px;">
          <el-input :rows="2" type="textarea" v-model="form.bill_why" autocomplete="off" size="medium" show-word-limit>
          </el-input>
        </div>
        
      </div>
      <!-- </el-col> -->
      <el-form-item>
        <el-button type="primary" @click="toSave">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { get,postJSON } from '@/utils/request'
export default {
  data() {
    return {
      // 校验规则
      rule:{
        id: [{ required: true, message: '请选择工程设备', trigger: 'change' }],
        bill_why: [{ required: true, message: '请输入报修原因', trigger: 'blur' }],
      },
      // 树形结构置顶
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      // 树形结构数据源
      data: [],
      // 工程设备
      empData:{},
      // 表单对象
      form:{},
      params:{
        page:1,
        pageSize:10,
      },
    };
  },
  computed: {},
  methods: {
    // 去提交
    toSave(){
      this.$refs["myForm"].validate(async (valid) => {
        if (valid) {
          // 校验通过
          let obj = {};
          obj.engineer_id = this.form.id[0];
          obj.device_id = this.form.id[1];
          // obj.account_id = 1;
          if(this.form.bill_why)
          obj.bill_why = this.form.bill_why;
          // 发送保存或更新请求
          let res = await postJSON('/workorder/repairOrder',obj);
          // 请求结果提示
          if(res.status === 200){
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            });
          }else{
            this.$notify({
              title: '失败',
              message: res.message,
              type: 'error'
            });
          };
        };
      });
    },
    // 获取工程设备数据
    async loadempData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      // console.log(res);
      this.data = res.data;
    },
  },
  created() {
    this.loadempData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>